<template>
    <div class="common-layout" v-if="!isLoginPage">
      <el-container >
        <el-header ><Header /></el-header>
        <el-container>
          <el-aside width="200px">
            <el-col :span="12">
              <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
              >
                <el-menu-item
                  :index="item.path"
                  v-for="(item, index) in menuList"
                  :key="item.id"
                >
                  <template #title>{{ item.name }}</template>
                </el-menu-item>
              </el-menu>
            </el-col>
            </el-aside>
          <el-main class="main-content"> <router-view /></el-main>
        </el-container>
      </el-container>
    </div>
     <el-main v-else="!isLoginPage">
      <router-view />
     </el-main>
  </template>
  <script setup>
  import Header from "./Header.vue";
  import { ref,computed } from "vue";
  import { useRoute ,useRouter} from 'vue-router';
  const menuList = ref([]);
  import {havePermission,noPermission,hasPermission} from "@/utils/permission";
  if(!hasPermission()){
    menuList.value = noPermission;
  }else{
    menuList.value = havePermission;
  }
  const route = useRoute()
  const router = useRouter()
  const isLoginPage = computed(() => {
    return  route.path === '/login'
  });
  const debounce = (fn, delay) => {
    let timer = null;
    return function () {
      let context = this;
      let args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  };
  // 解决ERROR ResizeObserver loop completed with undelivered notifications.
  const _ResizeObserver = window.ResizeObserver;
  window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
      callback = debounce(callback, 16);
      super(callback);
    }
  };
  const token=localStorage.getItem("token");
  console.log(token);
  if(!token) router.push("/login");
  </script>
  <style  scoped>
  .main-content{
    overflow:auto;
    height: 90vh;
  }
  </style>